<template>
	<section>
		<main>
			<mt-header fixed title="新手任务">
				<mt-button slot="left" icon="back" @click="goBack"></mt-button>
			</mt-header>
			<div class="mt40">
				<div>
					<img :src="newtaskImgBanner" width="100%">
				</div>
				<section class="wrap pb30 pt10">
					<ul class="ml20 mr20">
						<li class="pr bgwhite">
							<div class="clearfix">
								<strong class="fl mr15">
									<img :src="newtaskImg1" width="60" height="60">
								</strong>
								<h4 class="tl fs16">新手注册</h4>
								<p class="tl">赠送操盘模拟金</p>
								<p class="tl">模拟操盘金可用于【模拟交易】</p>
							</div>

							<em class="btn lh30 graybtn fs14">已领取</em>

							<img class="bg" :src="newtaskImg7">
						</li>

						<li class="pr bgwhite mt30">
							<div class="clearfix">
								<strong class="fl mr15">
									<img :src="newtaskImg2" width="60" height="60">
								</strong>
								<h4 class="tl fs16">{{task[0].missionName}}</h4>
								<p class="tl">领取{{task[0].money}}元现金奖励！</p>
								<p class="tl">先模拟，再交易！风险低，收益高</p>
							</div>

							<em class="btn lh30 fs14 yellowbtn" @click="jumpPage('/trade')" v-show="task[0].status==0">
								<span class="white">去交易</span>
							</em>
							<em
								class="btn lh30 fs14 yellowbtn"
								@click="getMoney(task[0])"
								v-show="task[0].status==1"
							>立即领取</em>
							<em class="btn lh30 graybtn fs14" v-show="task[0].status==2">已领取</em>

							<img class="bg" :src="newtaskImg7">
						</li>

						<li class="pr bgwhite mt30">
							<div class="clearfix">
								<strong class="fl mr15">
									<img :src="newtaskImg3" width="60" height="60">
								</strong>
								<h4 class="tl fs16">{{task[1].missionName}}</h4>
								<p class="tl">领取{{task[1].money}}元现金奖励！</p>
								<p class="tl">实名+绑定银行卡后就有现金奖励</p>
							</div>

							<em class="btn lh30 fs14 yellowbtn" v-show="task[1].status==0">
								<router-link to="/account/bindBank">
									<span class="white">去实名</span>
								</router-link>
							</em>
							<em
								class="btn lh30 fs14 yellowbtn"
								@click="getMoney(task[1])"
								v-show="task[1].status==1"
							>立即领取</em>
							<em class="btn lh30 graybtn fs14" v-show="task[1].status==2">已领取</em>

							<img class="bg" :src="newtaskImg7">
						</li>

						<li class="pr bgwhite mt30">
							<div class="clearfix">
								<strong class="fl mr15">
									<img :src="newtaskImg4" width="60" height="60">
								</strong>
								<h4 class="tl fs16">{{task[2].missionName}}</h4>
								<p class="tl">领取{{task[2].money}}元现金奖励！</p>
								<p class="tl">银联／支付宝充值，安全有保障</p>
							</div>

							<em class="btn lh30 fs14 yellowbtn" v-show="task[2].status==0">
								<a href="/account/paySelect.html">
									<span class="white">去充值</span>
								</a>
							</em>
							<em
								class="btn lh30 fs14 yellowbtn"
								@click="getMoney(task[2])"
								v-show="task[2].status==1"
							>立即领取</em>
							<em class="btn lh30 graybtn fs14" v-show="task[2].status==2">已领取</em>

							<img class="bg" :src="newtaskImg7">
						</li>

						<li class="pr bgwhite mt30">
							<div class="clearfix">
								<strong class="fl mr15">
									<img :src="newtaskImg5" width="60" height="60">
								</strong>
								<h4 class="tl fs16">{{task[3].missionName}}</h4>
								<p class="tl">领取{{task[3].money}}元现金奖励！</p>
								<p class="tl">完成一手外盘商品市价元模式交易可领取</p>
							</div>

							<em class="btn lh30 fs14 yellowbtn" v-show="task[3].status==0">
								<router-link to="/">
									<span class="white">去交易</span>
								</router-link>
							</em>
							<em
								class="btn lh30 fs14 yellowbtn"
								@click="getMoney(task[3])"
								v-show="task[3].status==1"
							>立即领取</em>
							<em class="btn lh30 graybtn fs14" v-show="task[3].status==2">已领取</em>

							<img class="bg" :src="newtaskImg7">
						</li>
					</ul>

					<div class="tip bgwhite ml20 mr20">
						<h5>
							<img :src="newtaskImg6" height="45">
						</h5>
						<ol class="tl mt10">
							<li>领取的现金奖励均在【我的】-账户余额查看</li>
							<li>需完成 >1 手国际期货 元模式交易，（A50，小恒指除外）即可领取</li>
							<li>【首次实盘交易】完成即可提现活动礼金</li>
							<li>本活动最终解释权归平台所有</li>
						</ol>
					</div>
				</section>
			</div>
		</main>
	</section>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
	name: 'Newtask',
	data() {
		return {
			newtaskImgBanner: '/static/imgs/newtask-banner.png',
			newtaskImg1: '/static/imgs/newtask1.png',
			newtaskImg2: '/static/imgs/newtask2.png',
			newtaskImg3: '/static/imgs/newtask3.png',
			newtaskImg4: '/static/imgs/newtask4.png',
			newtaskImg5: '/static/imgs/newtask5.png',
			newtaskImg6: '/static/imgs/newtask-title.png',
			newtaskImg7: '/static/imgs/newtask6.png',
			task: [{}, {}, {}, {},{}]
		}
	},
	created() {
		this.getNewtask()
	},
	computed: {},
	methods: {
		...mapMutations(['setGold']),
		getNewtask() {
			Indicator.open({
				text: '请稍候...',
				spinnerType: 'fading-circle'
			})
			axios({
				methods: 'post',
				url: '/user/mission/findUserMission.do',
				params: {}
			}).then(res => {
				Indicator.close()
				res = res.data
				if (res.code == 200) {
                    res.data.length && (this.task = res.data)
				} else if (res.code == 503) {
					this.$router.push({
						path: '/login'
					})
				} else {
					Toast(res.msg)
				}
			})
		},
		getMoney(obj) {
			Indicator.open({
				text: '领取中...',
				spinnerType: 'fading-circle'
			})
			axios({
				methods: 'post',
				url: '/user/mission/updateUserMission.do',
				params: {
					missionId: obj.missionId,
					status: obj.status,
					money: obj.money
				}
			}).then(res => {
				Indicator.close()
				res = res.data
				if (res.code == 200) {
					this.getNewtask()
					MessageBox.alert(res.msg, '领取现金')
				} else if (res.code == 503) {
					this.$router.push({
						path: '/login'
					})
				} else {
					Toast(res.msg)
				}
			})
		},
		jumpPage(page) {
			//设置交易模式为金币
			this.$store.commit('setGold', true)

			this.$nextTick(() => {
				this.$router.push({
					path: page
				})
			})
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
		}
	}
}
</script>

<style scoped lang='scss'>
.mint-button {
	background-color: #fff;
	margin-left: rem(5px);
}
main {
	background-color: #6777ff;
}

.wrap {
	background: linear-gradient(180deg, #6777ff, #9010e2);
}

div h3 {
	font-size: rem(15px);
	width: 2.2rem;
	margin: 0 auto;
	border-radius: rem(18px);
	line-height: rem(36px);
}

ul li,
.tip {
	padding: rem(15px);
	border-radius: rem(7px);
	box-shadow: 0 0 rem(15px) #fa8272 inset, 0 0 rem(10px) rgba(0, 0, 0, 0.4);
}

ul li h4 {
	margin-bottom: rem(5px);
}

ul li p {
	color: #c95d1f;
}

ul li .tag {
	position: absolute;
	top: rem(-30px);
	left: rem(20px);
	width: rem(70px);
	height: rem(30px);
	border-top-left-radius: rem(5px);
	border-top-right-radius: rem(5px);
}

ul li .tag span {
	display: block;
	border: 1px dotted #fff;
	border-bottom: 0 none;
	margin-top: rem(5px);
	margin-left: rem(5px);
	margin-right: rem(5px);
	border-top-left-radius: rem(3px);
	border-top-right-radius: rem(3px);
}

ul li em {
	position: absolute;
	top: rem(10px);
	right: rem(10px);
	width: rem(80px);
	border-radius: rem(15px);
	font-size: rem(14px);
}

ul li img.bg {
	position: absolute;
	width: rem(300px);
	height: auto;
	left: 50%;
	transform: translateX(-50%);
	bottom: rem(-16px);
	z-index: 0;
}

.tip {
	border-radius: rem(8px);
	margin-top: rem(60px);
}

.tip h5 {
	margin-top: rem(-36px);
}

ol {
	list-style-type: none;
	counter-reset: sectioncounter;
	color: #c95d1f;
	line-height: rem(20px);
}

ol li:before {
	content: counter(sectioncounter) '. ';
	counter-increment: sectioncounter;
}

.graybtn {
	background-color: #d2d2d2;
	color: #fff;
}

.yellowbtn {
	color: rgb(204, 11, 11);
	background-color: #fdca5c;
	box-shadow: 0 rem(-3px) rem(5px) #cf981f inset, 0 0 rem(5px) rgba(0, 0, 0, 0.3);
}

.yellowbtn span {
	color: rgb(204, 11, 11);
}
p {
	line-height: rem(20px);
}
h4{
    line-height: rem(25px);
}
</style>